<template>

<div class="fixed top-[180px] w-full h-[36px] flex justify-center " v-if="systemlist.length > 0">
        <div class="cursor-pointer relative" v-out-side="clickOutSide">
            <div @click="showMenu"
                class="w-[736px] flex items-center justify-center h-full bg-[linear-gradient(90deg,rgba(0,0,0,0)_0%,#103B68_50%,rgba(0,0,0,0)_100%)] ">
                <div class="mr-[10px] text-[14px] text-[#fff] font-medium">{{ activename }} </div>
                <el-icon class="arrow" :class="rotate ? 'rotatefresh' : ''">
                    <ArrowDown />
                </el-icon>
            </div>

            <!-- bottom -->
            <div class="w-[210px] flex items-center  absolute left-[calc(50%-105px)]" v-if="rotate">
                <div class="w-[210px] h-[290px] mt-[10px] bg-[rgba(13,44,83,0.8)] flex ">
         
                    
                    <!-- 右 -->
                    <div class="flex-1 px-[20px] overflow-y-scroll overflow-hidden  my-[20px]">
                        <div class=" " v-for="(item, index) in systemlist" :key="index"
                            @click="selectMenutwo(item, index)">
                            <div class="flex">
                                <div class="alltexts h-[14px] text-[14px] text-[#fff] font-medium"
                                    :class="selectIndextwo == item.systematicId ? 'opacity-100' : 'opacity-60'">
                                    {{ isNullOrEmpty(item.systematicName) }}</div>
                            </div>
                            <div v-if="selectIndextwo == item.systematicId"
                                class="pt-[1px] bg-[linear-gradient(90deg,#FFFFFF_0%,rgba(255,255,255,0)_100%)] my-[8px] ">
                            </div>
                            <div v-else class="pt-[1px]  my-[8px] ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- <div class="fixed top-[180px] cursor-pointer left-[570px]" v-if="systemlist.length > 0">
        <div class="flex justify-center  flex-col   items-center ">
            <div class="">
                <div class="[268px]   ">
                    <div class="w-[268px] gap-[20px] h-[46px] head  pl-[14px] flex items-center justify-between">
                        <div class="line-clamp-1 whitespace-normal break-all leading-[18px]">{{ isNullOrEmpty( activename ) }}</div>
                        <div @click="showMenu" :class="rotate ? 'rotatefresh' : ''" class="
                        arrow
                        bg-[#45526E]
                        w-[24px]
                        h-[24px]
                         rounded-[50%]
                         mr-[10px]
                         flex justify-center items-center">
                            <el-icon>
                                <CaretRight />
                            </el-icon>
                        </div>
                    </div>
                   
                    <div class="flex h-[300px] mt-[4px] alltext textStyle font-bold bg-[#262D38]"
                         v-if="rotate">

                        <div class="count overflow-auto  px-[18px] pt-[6px] pb-[24px] w-[268px]">
                            <div v-for="(item, index) in systemlist" @click="selectMenutwo(item, index)">
                                <div class="flex  gap-[10px] pt-[18px]">
                                    <div class="flex items-center mr-[0px]">
                                        <img v-if="selectIndextwo == item.systematicId" src="@/assets/screenimg/prej1@2x.png" class="w-[17px] h-[4px]"/>
                                        <img v-else src="@/assets/screenimg/prej2@2x.png" class="w-[17px] h-[4px]"/>
                                    </div>
                                    <div class="line-clamp-1 whitespace-normal break-all">
                                        {{ isNullOrEmpty(item.systematicName) }}
                                    </div>
                                </div>
                                <div class="mt-[18px] h-[1px]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { CaretRight,ArrowDown } from '@element-plus/icons-vue'
import { systematic, systematicson } from "@/api/screen/screenmune"
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const rotate = ref(false)
const activename=ref(null)
const selectIndextwo = ref(0)  //二级菜单index
const systemlist = ref([]) //二级菜单数据
watch(() => useDataDashboardThemeStore.GET_SETTING('systemidparent'), (newValue, oldValue) => {
    getsonlist(newValue)
}, { immediate: true })
//点击箭头旋转
const showMenu = () => {
    rotate.value = !rotate.value

}
const clickOutSide=()=>{
    console.log('sss');

    rotate.value = false
}
//获取二级系统
function getsonlist(id) {
    systemlist.value = []
    systematicson({ systematicId: id }).then(res => {
        if (res.code == 200) {
            console.log("获取子系统")
            systemlist.value = res.result
            activename.value = res.result[0].systematicName
            selectIndextwo.value=res.result[0].systematicId
            useDataDashboardThemeStore.CHANGE_SETTING({ key: "all", value: 0, })
            useDataDashboardThemeStore.CHANGE_SETTING({ key: "systematicId", value: res.result[0].systematicId, })
        }
    })
}

//点击2级菜单
const selectMenutwo = (item, index) => {
    activename.value = item.systematicName
    selectIndextwo.value=item.systematicId
    useDataDashboardThemeStore.CHANGE_SETTING({ key: "systematicId", value: item.systematicId })
}
</script>
<style lang="scss" scoped>
.borser {
    height: 1px;
    margin-top: 18px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
}

.textStyle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;


}

.rotatefresh {
    transform: rotate(180deg);
}

.arrow {
    // 动画
    transition: all 0.5s;
}

@keyframes moveLeft {
    from {
        transform: translateY(-100%);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes moveLefts {
    from {
        transform: translateY(0);
        opacity: .5;
    }

    to {
        transform: translateY(-466px);
        opacity: 0;
    }
}

.anmete {
    animation: moveLeft 1s;
    animation-fill-mode: forwards;
}

.anmetes {
    animation: moveLefts 1s;
    animation-fill-mode: forwards;
}

::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
}

.count {


    background: #0C2740;
    box-shadow: 0px 12px 2px 0px rgba(3, 17, 30, 0.48);
    border-radius: 2px;
    border: 2px solid;
    border-image: linear-gradient(0deg, rgba(0, 104, 147, 0.32), rgba(0, 104, 147, 0.32)) 2 2;
}

.head {
    background: linear-gradient(90deg, #0C2740 0%, #05192C 100%);
    border-radius: 5px;
    border: 1px solid #46556F;
}
</style>
